<template>
	<view class="rainAccount-box">
		<view class="list-table-box mt20">
			<view class="header-title">
				<view class="block"></view>
				<text>{{ areaName }} 小时雨量统计</text>
			</view>
			<s-table
				:columns="tableData.columns"
				:datas="tableData.datas"
				:sortKey="tableData.sortKey"
				@changeSort="changeSort"
				@customRow="customRow"
			></s-table>
			<!-- <view class="th">
					<view class="th-td fw600">站点</view>
					<view class="th-td" :class="{ acTive: typeSort == 'drpOneH' }" @click="sortType('drpOneH')">
						<text class="fw600">1h</text>
						<view class="iconfont-ro">
							<i class="iconfont icon-qiehuan"></i>
						</view>
					</view>
					<view class="th-td" :class="{ acTive: typeSort == 'drpThreeH' }" @click="sortType('drpThreeH')">
						<text class="fw600">3h</text>
						<view class="iconfont-ro"> <i class="iconfont icon-qiehuan"></i> </view
					></view>
					<view class="th-td" :class="{ acTive: typeSort == 'drpSixH' }" @click="sortType('drpSixH')">
						<text class="fw600">6h</text>
						<view class="iconfont-ro"> <i class="iconfont icon-qiehuan"></i> </view
					></view>
					<view class="th-td" :class="{ acTive: typeSort == 'drpTwelveH' }" @click="sortType('drpTwelveH')">
						<text class="fw600">12h</text>
						<view class="iconfont-ro"> <i class="iconfont icon-qiehuan"></i> </view
					></view>
					<view class="th-td" :class="{ acTive: typeSort == 'drpTwentyFourH' }" @click="sortType('drpTwentyFourH')">
						<text class="fw600">24h</text>
						<view class="iconfont-ro"> <i class="iconfont icon-qiehuan"></i> </view
					></view>
				</view>
				<view class="th-sv">
					<view class="th" v-for="(item, index) in dataList" :key="index" @click="seeMap(item)">
						<view class="th-td fs26" @click="showItem(item)">{{ item.stnm }}</view>
						<view class="th-td">
							{{ item.drpOneH }}
						</view>
						<view class="th-td">
							{{ item.drpThreeH }}
						</view>
						<view class="th-td">
							{{ item.drpSixH }}
						</view>
						<view class="th-td">
							{{ item.drpTwelveH }}
						</view>
						<view class="th-td">
							{{ item.drpTwentyFourH }}
						</view>
					</view>
					<u-empty text="暂无数据" mode="list" v-show="dataList.length == 0"></u-empty>
				</view> -->
		</view>

		<view class="list-table-box mt20">
			<view class="flex-vc w100">
				<view class="flex-vc title-box ml5">
					<listSelect v-model="hour" :list="hourList" @confirm="changeStatus" style="width: 210rpx"></listSelect>
				</view>
				<view class="flex-vc title-box ml20">
					<listSelect v-model="level" :list="levelList" @confirm="setTotalData" style="width: 210rpx"></listSelect>
				</view>
			</view>
			<view class="header-title">
				<view class="block"></view>
				<text>{{ areaName }} 小时雨量等级统计</text>
			</view>
			<s-table
				:columns="tableData2.columns"
				:datas="tableData2.datas"
				:sortKey="tableData2.sortKey"
				@changeSort="changeSort2"
			></s-table>
		</view>

		<!-- 站点点击弹窗 -->
		<!-- <u-popup v-model="sitePopupShow" mode="bottom" border-radius="14" closeable close-icon="arrow-down-fill">
			<ec-rain :nodeId="nodeId"></ec-rain>
		</u-popup> -->
	</view>
</template>
<script>
	import controlApi from '@/api/monitor/control.js'
	import moment from 'moment'
	import { debounce } from '@/utils/util'
	function setDataSort(data, key, order = 'desc') {
		let arr = []
		if (order == 'desc') {
			arr = data.sort((a, b) => {
				return b[key] - a[key]
			})
		} else {
			arr = data.sort((a, b) => {
				return a[key] - b[key]
			})
		}
		return arr.map((el, index) => {
			el.index = index + 1
			return el
		})
	}
	export default {
		name: 'rainAccount-box',
		components: {
			listSelect: () => import('@/components/common/select/listSelect.vue'),
			'ec-rain': () => import('@/components/home/ec-rain.vue')
		},
		props: {
			areaCode: {
				type: null,
				default: null
			},
			time: {
				type: null,
				default: null
			},
			areaName: {
				type: null,
				default: null
			},
			searchValue: {
				type: String,
				default: () => ''
			}
		},
		data() {
			return {
				hour: 1,
				hourList: [
					{ label: '近1小时', value: 1, extra: 0 },
					{ label: '近3小时', value: 3, extra: 1 },
					{ label: '近6小时', value: 6, extra: 2 },
					{ label: '近12小时', value: 12, extra: 3 },
					{ label: '近24小时', value: 24, extra: 4 }
				],

				level: 1,

				levelList: [
					{ label: '小雨', value: 1, extra: 0 },
					{ label: '中雨', value: 2, extra: 1 },
					{ label: '大雨', value: 3, extra: 2 },
					{ label: '暴雨', value: 4, extra: 3 },
					{ label: '大暴雨', value: 5, extra: 4 },
					{ label: '特大暴雨', value: 6, extra: 5 }
				],

				dataList: [],

				totalData: [],
				totalDataList: [],

				tableData: {
					sortKey: 'drpOneH',
					columns: [
						{ title: '序号', key: 'index', isClick: false },
						{ title: '站点', key: 'stnm', isClick: false, width: '250rpx' },
						{ title: '1小时', key: 'drpOneH', isClick: true },
						{ title: '3小时', key: 'drpThreeH', isClick: true },
						{ title: '6小时', key: 'drpSixH', isClick: true },
						{ title: '12小时', key: 'drpTwelveH', isClick: true },
						{ title: '24小时', key: 'drpTwentyFourH', isClick: true }
					],
					datas: []
				},
				tableData2: {
					sortKey: 'stnm',
					columns: [
						{ title: '序号', key: 'index', isClick: false },
						{ title: '站点', key: 'stnm', isClick: true },
						{ title: '乡镇', key: 'townAdnm', isClick: true },
						{ title: '雨量', key: 'drp', isClick: false }
					],
					datas: []
				},

				siteType: 'site', //town
				nodeId: '',
				sitePopupShow: false
			}
		},
		computed: {},
		mounted() {},
		methods: {
			async init() {
				let params = {
					areaId: this.areaCode,
					projectId: '3bc0fb05339a46d7966a7abac9fc3516',
					time: this.time, // '2022-06-15 08:00:00',
					type: this.areaCode == '350400000000' ? 'CITY' : 'COUNTY'
				}
				let queryString = '?'

				for (const key in params) {
					if (params.hasOwnProperty(key)) {
						queryString += `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}&`
					}
				}
				const resp = await controlApi.getHistoryRainMonitorSegment(queryString)
				this.dataList = resp.data.rainMonitorSegs
				this.tableData.datas = resp.data.rainMonitorSegs.filter((el, index) => {
					el.index = index + 1
					return el.stnm.indexOf(this.searchValue) > -1 || this.searchValue == ''
				})
				this.initTotal()
			},

			changeSort(item) {
				this.tableData.sortKey = item.key
				this.tableData.datas = setDataSort(this.tableData.datas, item.key)
			},
			changeSort2(item) {
				this.tableData2.sortKey = item.key
				if (item.key == 'stnm') {
					this.setTotalData()
				} else {
					this.setTotalDataTown()
				}
				// this.tableData2.datas =
			},
			changeStatus() {
				this.$nextTick(() => {
					this.initTotal()
				})
			},

			async initTotal() {
				uni.showLoading({
					title: '正在加载'
				})
				const resp = await controlApi.getMagnitudeRainAreaByType({
					areaId: parseFloat(this.areaCode),
					begin: moment(this.time).subtract('hours', this.hour).format('YYYY-MM-DD HH:mm:ss'), //  '2022-06-12 10:08:15',
					end: this.time, // '2022-06-13 10:08:15',
					type: this.areaCode == '350400000000' ? 'CITY' : 'COUNTY',
					projectId: '3bc0fb05339a46d7966a7abac9fc3516'
				})
				this.$hideLoading()
				this.totalData = resp.data.data
				this.sortSiteType()
			},
			sortSiteType() {
				if (this.tableData2.sortKey == 'stnm') {
					this.setTotalData()
				} else {
					this.setTotalDataTown()
				}
			},
			// 站点
			setTotalData() {
				this.$nextTick(() => {
					let items = this.totalData.find((el) => el.level == this.level)
					if (items) {
						let arrList = []
						items.lstCounty.forEach((el) => {
							if (el.lstTown) {
								el.lstTown.forEach((sin, index) => {
									arrList.push(...sin.sites)
								})
							}
						})
						this.totalDataList = arrList.sort((a, b) => b.drp - a.drp)
						console.info(`arrList:`, arrList)
						this.tableData2.datas = this.totalDataList.map((el, index) => {
							el.index = index + 1
							return el
						})
					}
				})
			},
			// 乡镇
			setTotalDataTown() {
				this.$nextTick(() => {
					let items = this.totalData.find((el) => el.level == this.level)
					if (items) {
						let arrList = []
						items.lstCounty.forEach((el) => {
							if (el.lstTown) {
								el.lstTown.forEach((sin) => {
									arrList.push(sin)
								})
							}
						})
						this.totalDataList = arrList.map((el, index) => {
							el.drp = el.maxDrp
							el.index = index + 1
							// el.stnm = el.townAdnm
							return el
						})
						this.totalDataList = this.totalDataList.sort((a, b) => b.drp - a.drp)
						console.info(`arrList:`, arrList)
						this.tableData2.datas = this.totalDataList
					}
				})
			},
			customRow(item) {
				console.info(`item:`, item)
				// if (!item.lat || !item.lot) {
				// 	return
				// }
				let lat = item.lat || item.latitude
				let lon = item.lot || item.longitude
				uni.$emit('flyMap', { lat, lon, zoom: 14.5 })
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>
<style lang="less">
	.rainAccount-box {
		width: 100%;
		height: 100%;
		.list-table-box {
			width: 750rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: #fff;
			box-shadow: 0px 4rpx 30rpx 0px rgba(0, 0, 0, 0.08);
			margin-top: 40rpx;
			padding: 15rpx;
			.header-title {
				width: 100%;
				display: flex;
				color: #3d3d3d;
				font-family: PingFang SC;
				font-size: 24rpx;
				font-style: normal;
				font-weight: 500;
				align-items: center;
				justify-content: flex-start;
				color: #3d3d3d;
				text-align: center;
				font-family: PingFang SC;
				font-style: normal;
				font-weight: 550;
				margin: 20rpx 0;
				.block {
					width: 6rpx;
					height: 37rpx;
					background: #0094ff;
					border-radius: 7rpx;
					margin-right: 10rpx;
				}
			}
			.title-box {
				width: 248rpx;
				border: 1rpx solid #cecece;
				border-radius: 10rpx;
				height: 60rpx;
			}
		}
	}
</style>
